<template>
	<div class="add">
		<h1>增删系统</h1>
		<div class="add-viedeo add-box">
			<span class="add-msg">添加视频：</span><input type="text" v-model='addVideoID' class="ipt">
			<br>
			<div class="date-box">
				<span class="add-msg">截止时间：</span>
	            <DatePicker type="date" placeholder="截止时间"v-model='addVideoTime'  ></DatePicker>
			</div>
			<span class="add-msg">最大阀值：</span><input type="text" v-model='max_play' class="ipt">
			<br>
			<button @click='addVideo' class="btn">确定添加</button>
		</div>
		<div class="add-box">
			<span class="add-msg">视频ID &nbsp&nbsp：</span><input type="text" v-model='changeID' class="ipt">
			<div class="date-box">
				<span class="add-msg">重置时间：</span>
	            <DatePicker type="date" placeholder="重置时间"v-model='changeTime'  ></DatePicker>
			</div>
			<span class="add-msg">重置阀值：</span><input type="text" v-model='changeMaxPlay' class="ipt">
			<br>
			<button @click='changeVieoData' class="btn">确定更新</button>
		</div>
		<div class=" add-box">
			<p class="title">当前被监控的关键词：</p>
			<div class="keyword-box" v-for='(item,index) of keywords'>
				<p >
					关键词：<span class="red">{{item[index]}}</span>.
					监控状态:<span>{{item.is_checked}}</span>	
				</p>
				<button @click='updateState(item[index])' class="btn">切换关键词状态</button>
				<button @click='deleteKeyword(item[index])' class="btn delete">删除关键词</button>
			</div>
			<p class="red hint">注意：1为被监控0为未被监控</p>
		</div>

		<div class=" add-box">
			<span class="add-msg">添加关键词:</span><input type="text" v-model='keyword' class="ipt">			
			<button @click='addKeyword' class="btn">确定添加</button>
		</div>
		<div class=" add-box">
			<p class="title">获取接受通知的邮箱：</p>
			<div class="keyword-box" v-for='(item,index) of Emails'>
				<p >
					邮箱:<span class="red">{{item[index]}}</span>.
					监控状态:<span>{{item.is_noticed}}</span>	
				</p>
				<button @click='updateStateEmail(item[index])' class="btn">切换监控状态</button>
				<button @click='deleteEmail(item[index])' class="btn delete">删除邮箱</button>
			</div>
			<p class="red hint">注意：1为被监控0为未被监控</p>
		</div>
		<div class=" add-box">
			<span class="add-msg">添加邮箱:</span><input type="text" v-model='email' class="ipt">			
			<button @click='addEmail' class="btn">确定添加</button>
		</div>
			<transition name="fade">
				<msg v-show='show' class='msg' :class="{succ:isSucc}">{{msg}}</msg>
			</transition>
	</div>
</template>
<script>
	import {addVideo,getKeywords,updateState,addKeyword,deleteKeyword,getEmail,updateStateEmail,changeTime,addEmail,deleteEmail} from '@/api/ajax.js'
	import {DatePicker} from 'iview';
	import Msg from '@/pages/msg'
	export default {
		data(){
			return {
				token:'',
				addVideoID:0,
				max_play:5000,
				addVideoTime:"2018-07-29 00:00:00",
				msg:'',
				show:false,
				isSucc:true,
				keywords:[],
				keyword:'',
				Emails:[],
				email:'',
				changeTime:'2018-07-29 00:00:00',
				changeID:0,
				changeMaxPlay:5000,

			}
		},
		components:{
			Msg,
			DatePicker
		},
		created(){
	    	this.token =  sessionStorage.getItem('token')
	    	this.getKeywords()
	    	this.getEmail()
	    	this.$emit('navList',1)
		},
		methods:{
			addVideo(){
				const that = this;
				const dateS = this.changeDateStr(this.addVideoTime)				
				addVideo(that.addVideoID,that.token,dateS,that.max_play,function(res){
					that.msgs(res.data.code,0)
				})
			},
			//获取监控关键词
			getKeywords(){
		    	const that = this
		    	getKeywords(that.token,function(res){
		    		if(res.data.code==0){
			    		that.keywords = res.data.data
		    		}
		    	})
			},
			addKeyword(){
				const that = this;
				addKeyword(that.token,that.keyword,function(res){
					if(res.data.code==0){
						that.getKeywords()
						that.keyword=''
					}
				})
			},
			updateState(keyword){
				const that = this;
				updateState(that.token,keyword,function(res){
			    	that.getKeywords()
				})
			},
			updateStateEmail(email){
				const that = this;
				updateStateEmail(that.token,email,function(res){
			    	that.getEmail()
				})				
			},
			deleteKeyword(keyword){
				const that = this;
				deleteKeyword(that.token,keyword,function(res){
			    	that.getKeywords()
				})				
			},
			getEmail(){
		    	const that = this
		    	getEmail(that.token,function(res){
		    		if(res.data.code==0){
			    		that.Emails = res.data.data
		    		}
		    	})				
			},
			changeVieoData(){
				const that = this
				const dateS = this.changeDateStr(this.changeTime)	
				changeTime(that.token,that.changeID,that.changeMaxPlay,dateS,function(res){
					that.msgs(res.data.message,'ok')
				})
			},
			addEmail(){
				const that = this;
				addEmail(that.token,that.email,function(res){
					that.msgs(res.data.code,0,function(){
							that.getEmail()
							that.email = ''
					})
				})
			},
			deleteEmail(email){
				const that = this;
				deleteEmail(that.token,email,function(res){
					that.msgs(res.data.code,0,function(){
						that.getEmail()
					})
				})
			},
			msgs(key,value,fn){
				const that = this
				if(key==value){
					that.msg = '成功啦ovo'
					that.show = true
					that.isSucc = true
					if(fn){
						fn()
					}
					setTimeout(()=>{
						that.msg = ''
						that.show = false
					},1500)
				}else{
					that.msg = '失败惹QAQ！'
					that.show = true
					that.isSucc = false
					setTimeout(()=>{
						that.msg = ''
						that.show = false
					},1500)
				}				
			},
			changeDateStr(dateV){
				let date_value=dateV.getFullYear() + '-' + (dateV.getMonth() + 1) + '-' + dateV.getDate() + ' ' + dateV.getHours() + ':' + dateV.getMinutes() + ':' + dateV.getSeconds()
				let dateS = Date.parse(new Date(date_value)).toString();
				dateS = dateS.substr(0,10)
				return dateS			
			}
		}
	}
</script>
<style scoped>
	.add{
		position: relative;
		width: 100%;
		background-color: #e9eaec;
	}
	h1{
		width: 80%;
		margin: 0 auto;
	}
	.add-box{
		width: 80%;
		padding: 0 10px;
		margin: 10px auto;
		border-bottom: 3px solid #ff6700;
		border-radius: 0;
	}
	.ipt{
		background-color: transparent;
		border: 0;
		width: 60%;
		height: 30px;
		border-radius: 30px;
		border: 1px solid rgba(19, 21, 25, 0.3);
		outline: none;
		margin-top: 20px;
		text-indent: 10px;
		color: #ff6700;
	}
	.ipt:focus{
		border: 1px solid red;
	}
	.btn{
		height: 30px;
		padding: 0 10px;
		color: #fff;
		border: 0;
		outline: none;
		border-radius: 5px;
		background-color: #19be6b;
		margin:10px 0;
	}
	.delete.btn{
		background-color: red;
	}
	.msg{
		width: 100%;
		position: fixed;
		left: 0;
		top: 50%;
		background-color: #ff6700;
	}
	.msg.succ{
		color: #fff;
		background-color: #19be6b
	}
	.fade-enter-active, .fade-leave-active {
		transition: opacity 1.5s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
		opacity: 0;
	}
	.red{
		color: red;
	}
	.hint{
		margin-top: 10px; 
		font-size: 14px;
	}
	.title{
		padding: 10px 0 ;
		color: #19be6b
	}
	.keyword-box{
		margin-top: 10px;
		border-radius: 10px;
	}
</style>